<template>
  <div class="mod-prod-info">
    <el-form
      @submit.native.prevent
      :model="dataForm"
      ref="dataForm"
      label-width="120px"
      size="small"
    >
      <div class="panel">
        <div class="title">
          <div class="flex">
            <div class="blue-line"></div>
            <div class="title-label">区块设置</div>
          </div>
        </div>
      </div>
      <div class="custom-blocks">
        <div class="custom-block" v-for="(item, index) in userCustomPaths">
          <div class="flex">
            <div class="aeroplane-icon">
              <img src="@/assets/img/aeroplane.png" alt="" srcset="" />
            </div>
            <div>
              <div class="aeroplane-name">{{ item.name }}</div>
              <div class="aeroplane-time-consuming">
                <img
                  style="width: 12px; height: 12px; margin-right: 4px"
                  src="@/assets/img/icon-clock.png"
                />
                {{ item.timeConsuming }}分钟
              </div>
            </div>
          </div>
          <div class="custom-block-icons">
            <img
              src="@/assets/icon/white-icon-edit.png"
              @click="editCustomPath(item)"
            />
            <img
              src="@/assets/icon/white-icon-del.png"
              @click="delCustomPath(item)"
            />
          </div>
        </div>
        <div class="custom-block-add" @click="addCustomPath">
          <div class="custom-block-add-box">
            <div class="add-icon">+</div>
            <div>自定义</div>
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="title">
          <div class="flex">
            <div class="blue-line"></div>
            <div class="title-label">路径规划</div>
            <div class="blue-tip">
              提示：同区域配送: 配送时间 x2; 跨区域配送: 始发地x 1.5;
            </div>
          </div>
          <div class="add-distribution-route">
            <el-button type="primary" @click="addDistributionRoute"
              >新增配送路线</el-button
            >
          </div>
        </div>
      </div>

      <div class="road-cells">
        <div
          :class="['road-item', item.id ? '' : 'bg-c']"
          v-for="(item, index) in roadConfigList"
          :key="index"
        >
          <div class="road-form-to">
            <div class="road-form-label">
              路径 {{ (params.current - 1) * params.size + index + 1 }}
            </div>
            <div class="road-form-value">
              {{ item.startPoint }}
              <!-- <el-cascader
                size="mini"
                class="w270"
                :clearable="true"
                :ref="`CascaderShopLocationStart`"
                :options="shopLocationOptions"
                :props="shopLocationProps"
                @change="
                  handleShopLocationChange(
                    $event,
                    index,
                    `CascaderShopLocationStart`
                  )
                "
              >
              </el-cascader> -->
            </div>
            <div class="form-to-img">
              <img src="@/assets/img/form-to.png" alt="" srcset="" />
            </div>
            <div class="road-form-value">
              {{ item.endPoint }}
              <!-- <el-cascader
                size="mini"
                class="w270"
                :clearable="true"
                :ref="`CascaderShopLocationEnd`"
                :options="shopLocationOptions"
                :props="shopLocationProps"
                @change="
                  handleShopLocationChange(
                    $event,
                    index,
                    `CascaderShopLocationEnd`
                  )
                "
              >
              </el-cascader> -->
            </div>
            <div class="custom-block-icons">
              <img
                src="@/assets/icon/white-icon-edit.png"
                @click="handleRoadConfigRowTitleEdit(item)"
              />
              <img
                src="@/assets/icon/white-icon-del.png"
                @click="handleRoadConfigRowDel(item, index)"
              />
            </div>
          </div>

          <div :class="['distribution-route', item.id ? '' : 'no-bg']">
            <div class="road-form-label flex">
              <div>配送路线</div>
              <div class="road-form-row-save">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleRoadConfigRowSave(item)"
                  v-if="item.canEdit"
                >
                  保存
                </el-button>
                <el-button
                  size="mini"
                  @click="handleRoadConfigRowCancel(item, index)"
                  v-if="item.canEdit && item.id"
                >
                  取消
                </el-button>
                <div class="custom-block-icons" v-if="!item.canEdit">
                  <img
                    src="@/assets/icon/white-icon-edit.png"
                    @click="handleRoadConfigRowEdit(item)"
                  />
                </div>
              </div>
            </div>
            <div class="addr-path">
              <div
                class="select-addr"
                v-for="(a_item, a_index) in item.routeJsonObj"
              >
                <div class="round-num">{{ a_index + 1 }}</div>
                <div class="flex">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="a_item.airportBlockTimeName"
                    placement="top"
                    :manual="!a_item.airportBlockTimeName"
                  >
                    <el-select
                      v-model="a_item.airportBlockTimeId"
                      size="small"
                      filterable
                      :disabled="!item.canEdit"
                    >
                      <el-option
                        v-for="a_s_item in userCustomPaths"
                        :key="a_s_item.id"
                        :label="a_s_item.name"
                        :value="a_s_item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-tooltip>

                  <el-button
                    size="mini"
                    class="mini-btn-add"
                    icon="el-icon-plus"
                    @click="addDrChild(index, a_index)"
                    v-if="item.canEdit"
                  ></el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    plain
                    class="mini-btn-del"
                    icon="el-icon-minus"
                    @click="delDrChild(index, a_index)"
                    v-if="item.canEdit && a_index !== 0"
                  ></el-button>
                  <el-button
                    type="text"
                    v-if="a_index !== item.routeJsonObj.length - 1"
                    class="connector-symbol"
                    >+</el-button
                  >
                  <el-button
                    type="text"
                    v-if="a_index === item.routeJsonObj.length - 1"
                    class="connector-symbol"
                    >=</el-button
                  >
                  <img
                    class="icon-clock"
                    v-if="
                      a_index === item.routeJsonObj.length - 1 && !item.canEdit
                    "
                    src="@/assets/img/icon-clock.png"
                    alt=""
                    srcset=""
                  />
                  <div
                    class="all-time"
                    v-if="
                      a_index === item.routeJsonObj.length - 1 && !item.canEdit
                    "
                  >
                    {{ item.timeConsuming }}分钟
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.current"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.size"
      background
      layout="total, sizes, prev, pager, next"
      :total="params.total"
    >
    </el-pagination>
    <AddOrUpdateCustomPathComp
      ref="AddOrUpdateCustomPathComp"
      @refresh="refreshPageList"
    />
    <AddOrUpdateDistributionRouteComp
      ref="AddOrUpdateDistributionRouteComp"
      @newSave="newSave"
      @editSave="handleRoadConfigRowSave"
    />
  </div>
</template>

<script>
import AddOrUpdateCustomPathComp from "./AddOrUpdateCustomPathComp";
import AddOrUpdateDistributionRouteComp from "./AddOrUpdateDistributionRouteComp";
import { deepCopy } from "@/utils";
export default {
  components: { AddOrUpdateCustomPathComp, AddOrUpdateDistributionRouteComp },
  data() {
    return {
      dataForm: {},
      userCustomPaths: [],
      roadConfigList: [],
      params: {
        current: 1,
        size: 10,
      },
    };
  },
  created() {
    this.refreshPageList();
  },
  methods: {
    refreshPageList() {
      this.getRouteBlockList();
      this.getRoutePageList();
    },
    newSave(info) {
      if (this.roadConfigList[0]._newSave) {
        this.$set(this.roadConfigList, 0, info);
        return;
      }
      let obj = {
        routeJsonObj: [
          {
            sequence: 1,
            airportBlockTimeId: "",
          },
        ],
        ...info,
        canEdit: true,
      };
      this.roadConfigList.unshift(obj);
    },
    // 新增编辑路线1 2 3
    addDistributionRoute() {
      if (this.roadConfigList.some((item) => item._newSave)) {
        this.$message.error("请先保存新增路线");
        return;
      }
      this.$refs.AddOrUpdateDistributionRouteComp.open();
    },
    getRouteBlockList() {
      this.$http({
        url: this.$http.adornUrl("/platform/route/block/list"),
        method: "get",
      }).then(({ data }) => {
        this.userCustomPaths = data;
      });
    },
    // 新增 编辑块
    addCustomPath() {
      this.$refs.AddOrUpdateCustomPathComp.open();
    },
    editCustomPath(item) {
      this.$refs.AddOrUpdateCustomPathComp.open(item.id);
    },
    // 获取路径列表
    getRoutePageList() {
      this.$http({
        url: this.$http.adornUrl("/platform/route/pageList"),
        method: "post",
        data: this.$http.adornParams(this.params),
      }).then(({ data }) => {
        this.roadConfigList = data.records;
        this.params.total = data.total;
      });
    },
    delCustomPath(item) {
      this.$confirm("删除区块后，配送路线中包含的区块一同删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/platform/route/block/delBlock/${item.id}`),
          method: "get",
        }).then(() => {
          this.refreshPageList();
          this.$message.success("删除成功");
        });
      });
    },
    handleRoadConfigRowEdit(item) {
      let index = this.roadConfigList.findIndex((f) => f.canEdit);
      if (index !== -1) {
        let seq = (this.params.current - 1) * this.params.size + index + 1;
        this.$message.warning(`请先完成“路径${seq}”的编辑`);
        return;
      }
      item._oldRow = deepCopy(item);
      this.$set(item, "canEdit", true);
    },
    handleRoadConfigRowCancel(item, index) {
      this.$set(item, "canEdit", false);
      this.$set(this.roadConfigList, index, item._oldRow);
    },
    handleRoadConfigRowSave(item) {
      console.log(item);
      if (!item._newSave) {
        if (!item.routeJsonObj || !item.routeJsonObj.length) {
          this.$message.warning("请至少选择一个配送路线");
          return;
        }
      }
      if (item.routeJsonObj.some((s) => !s.airportBlockTimeId)) {
        this.$message.warning("您还有未选择的配送路线");
        return;
      }
      this.$http({
        url: this.$http.adornUrl(
          item.id ? "/platform/route" : "/platform/route"
        ),
        method: item.id ? "put" : "post",
        data: this.$http.adornData({
          ...item,
          routeJson: JSON.stringify(item.routeJsonObj),
        }),
      }).then((res) => {
        console.log(res);
        this.$set(item, "canEdit", false);
        this.getRoutePageList();
        this.$message.success("保存成功");
      });
    },
    // 下面列表行的编辑
    handleRoadConfigRowTitleEdit(item) {
      item.isUnSaveEdit = 1;
      this.$refs.AddOrUpdateDistributionRouteComp.open(item);
    },
    // 下面列表行的删除
    handleRoadConfigRowDel(item, index) {
      if (item.id) {
        this.$confirm("删除路径后关联的配送路线一同删除", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/platform/route/${item.id}`),
            method: "delete",
          }).then((res) => {
            this.roadConfigList.splice(index, 1);
            this.$message.success("删除成功");
          });
        });
      } else {
        this.$confirm("确定要删除这条还未配置的路径吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.roadConfigList.splice(index, 1);
        });
      }
    },
    addDrChild(index, aIndex) {
      this.roadConfigList[index].routeJsonObj.splice(aIndex + 1, 0, {});
      this.computedRoadsSequence(index);
    },
    delDrChild(index, aIndex) {
      this.$confirm("确定要删除该段路径吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.roadConfigList[index].routeJsonObj.splice(aIndex, 1);
        this.computedRoadsSequence(index);
      });
    },
    // 计算sequence排序
    computedRoadsSequence(index) {
      this.roadConfigList[index].routeJsonObj.forEach((f, f_index) => {
        this.$set(f, "sequence", f_index + 1);
      });
    },
    // 分页每页多少条
    handleSizeChange(val) {
      this.params.size = val;
      this.getRoutePageList();
    },
    // 分页当前第几页
    handleCurrentChange(val) {
      this.params.current = val;
      this.getRoutePageList();
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
.mod-prod-info {
  .title {
    display: flex;
    color: #333333;
    align-items: center;
    justify-content: space-between;
    .title-label {
      font-size: 14px;
      font-weight: bold;
    }
    .blue-line {
      width: 4px;
      height: 14px;
      background: #1890ff;
      border-radius: 2px;
      margin-right: 10px;
    }
    .blue-tip {
      padding: 4px 10px;
      background: rgba(24, 144, 255, 0.1);
      border-radius: 4px;
      border: 1px solid #1890ff;
      margin-left: 24px;
    }
    margin-bottom: 20px;
  }
}
.panel,
.panel-item {
  margin-bottom: 24px;
}

.custom-blocks {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.custom-block {
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 14px;
  display: flex;
  margin: 0 15px 30px 15px;
  justify-content: space-between;
  .aeroplane-icon {
    width: 30px;
    height: 30px;
    margin-right: 8px;
  }
  .aeroplane-name {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    width: 120px;
    word-wrap: break-word;
  }
  .aeroplane-time-consuming {
    margin-top: 4px;
    display: flex;
    align-items: center;
  }
}
.custom-block-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    cursor: pointer;
  }
}
.custom-block-add {
  width: 268px;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #1890ff;
  display: flex;
  text-align: center;
  align-items: center;
  margin: 0 15px;
  .custom-block-add-box {
    height: max-content;
    width: max-content;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    color: #1890ff;
    .add-icon {
      font-size: 30px;
    }
  }
}

.road-cells {
  .road-item {
    width: 100%;
    min-height: 188px;
    background: #ffffff;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 20px;
  }
  .bg-c {
    background: rgba(250, 235, 215, 0.4);
  }
  .road-form-to {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .road-form-value {
      height: max-content;
    }
    .form-to-img {
      img {
        height: 6px;
      }
    }
  }
  .road-form-label {
    font-weight: 500;
    font-size: 16px;
    color: #1890ff;
    font-style: normal;
    justify-content: space-between;
  }
  .distribution-route {
    width: 100%;
    background: #fcfeff;
    border-radius: 8px;
    border: 1px solid rgba(204, 204, 204, 0.5);
    margin-top: 14px;
    box-sizing: border-box;
    padding: 20px;
  }
  .no-bg {
    background: none;
  }
}
.w270 {
  width: 200px;
}

.addr-path {
  display: flex;
  flex-wrap: wrap;
}

.select-addr {
  display: flex;
  align-items: center;
  margin-top: 16px;
  margin-right: 15px;
  .round-num {
    width: 24px;
    height: 24px;
    border: 1px solid #1890ff;
    border-radius: 50%;
    color: #1890ff;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    margin-right: 10px;
  }
}
.mini-btn-add {
  margin-left: 4px;
  padding: 9px;
}
.mini-btn-del {
  padding: 9px;
}
.connector-symbol {
  padding: 0;
  color: #f34b4b;
  font-size: 28px;
  margin-left: 10px;
  align-items: center;
  font-weight: 300;
  cursor: default;
  margin-bottom: 5px;
}
.icon-clock {
  width: 18px;
  height: 18px;
  margin-left: 10px;
  margin-right: 10px;
}

.all-time {
  padding: 0 20px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #f5f5f5;
  border-radius: 4px;
  border: 1px solid rgba(217, 217, 217, 0.1);
  color: #1890ff;
}
</style>
